<template>
	<view class="container">
		<view class="u-flex u-border-bottom u-row-around u-font-30 f-item u-m-t-50" style="color: #0D1D36;">
			<text  @click="changeTab(1)" :class="[currentTab == 1 ? 'qb' : '']" >预设课程</text>
			<text  @click="changeTab(2)" :class="[currentTab == 2 ? 'qb' : '']">自设课程</text>
		</view>
		<view v-if="currentTab == 1" class="">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" :border-bottom="true" label="课程名称" prop="name">
					<u-input :border="border" placeholder="请输入" v-model="model.name" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="课程分类" prop="classify">
					<view style="width:100%;text-align: right;" @click="mSelect">{{model.classify || "请选择"}}</view>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition"
				 :border-bottom="true" label="产业" prop="specialty">
					<view style="width:100%;text-align: right;" @click="cySelect">{{model.industry || "请选择"}}</view>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="专业方向" prop="direction">
					<view style="width:100%;text-align: right;" @click="zySelect">{{model.direction || "请选择"}}</view>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition"
				 :border-bottom="true" label="地域" prop="region">
					<view style="width:100%;text-align: right;" @click="cityActive = true">{{model.region || "请选择"}}</view>
					<!-- <u-input type="select" :select-open="selectShowDy" v-model="model.region" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowDy = true"></u-input> -->
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="授课方式" prop="types">
					<u-input
						type="select"
						:select-open="selectShowtypes"
						v-model="model.types"
						placeholder="请选择"
						placeholderStyle="color: #0D1D36;"
						input-align="right"
						@click="selectShowtypes = true"
					></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" :border-bottom="true" label="课程时长" prop="duration">
					<u-input :border="border" placeholder="请输入课时  课时" v-model="model.duration" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" :border-bottom="true" label="课程价值" prop="value">
					<u-input :border="border" placeholder="请输入价格  元" v-model="model.value" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="  zwpj u-m-l-30  " :label-position="labelPosition"  prop="content">
					<u-input  type="textarea" :border="border" placeholder="请输入课程简介" v-model="model.content" />
				</u-form-item>
			</u-form>
			<u-select mode="single-column" :list="selectList" v-model="selectShowclassify" @confirm="selectConfirmclassify"></u-select>
			<u-select mode="single-column" :list="selectList" v-model="selectShowdirection" @confirm="selectConfirmdirection"></u-select>
			<u-select mode="single-column" :list="skList" v-model="selectShowtypes" @confirm="selectConfirmtypes"></u-select>
			<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
			<view class="u-flex u-row-between u-m-l-45 u-m-r-30">
				<view class="u-flex kcmx">
					<image  src="../../static/img/kcmx.png" mode=""></image>
					<text class="u-font-38" >课程明细</text>
				</view>
				<view @click="addInner" class="tj u-flex u-row-center">
					<image  src="../../static/img/jials.png" mode=""></image>
					<text class="u-m-l-10">添加</text>
				</view>
			</view>
			<view v-for="(item,index) in tabs" :key="index" class="kcxq u-m-l-30 u-m-t-40">
				<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" :border-bottom="false" label="课时" prop="ks">
						<u-input :border="border" placeholder="请输入课时名称" v-model="item.name" type="text" input-align="left"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" :border-bottom="false" label="说明" prop="sm">
						<u-input :border="border" placeholder="请输入课时说明" v-model="item.content" type="text" input-align="left"></u-input>
					</u-form-item>
					<u-form-item class="kctp" :label-position="labelPosition" :border-bottom="false" prop="photo" label-width="150">
						<u-upload ref="uUpload" @on-uploaded="onUploadedZl" :action="action" :show-progress="false" max-count="1" :site="baseUrl">
						</u-upload>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view v-if="currentTab == 2" class="">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" :border-bottom="true" label="课程名称" prop="name">
					<u-input :border="border" placeholder="请输入" v-model="model.name" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="课程分类" prop="classify">
					<view style="width:100%;text-align: right;" @click="mSelect">{{model.classify || "请选择"}}</view>
				</u-form-item>
				
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition"
				 :border-bottom="true" label="产业" prop="specialty">
					<view style="width:100%;text-align: right;" @click="cySelect">{{model.industry || "请选择"}}</view>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="专业方向" prop="direction">
					<view style="width:100%;text-align: right;" @click="zySelect">{{model.direction || "请选择"}}</view>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30"  :label-width="200" :label-position="labelPosition"
				 :border-bottom="true" label="地域" prop="region">
				 <view style="width:100%;text-align: right;" @click="cityActive = true">{{model.region || "请选择"}}</view>
					<!-- <u-input type="select" :select-open="selectShowDy" v-model="model.region" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowDy = true"></u-input> -->
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="授课方式" prop="types">
					<u-input
						type="select"
						:select-open="selectShowtypes"
						v-model="model.types"
						placeholder="请选择"
						placeholderStyle="color: #0D1D36;"
						input-align="right"
						@click="selectShowtypes = true"
					></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" :border-bottom="true" label="课程时长" prop="duration">
					<u-input :border="border" placeholder="请输入课时  课时" v-model="model.duration" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" :border-bottom="true" label="课程价值" prop="value">
					<u-input :border="border" placeholder="请输入价格  元" v-model="model.value" type="text" input-align="right"></u-input>
				</u-form-item>
				<!-- <u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" :border-bottom="true" label="课程价值" prop="value">
					<u-input :border="border" placeholder="请输入价格  元" v-model="model.value" type="text" input-align="right"></u-input>
				</u-form-item> -->
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" :border-bottom="true" label="拼课人数" prop="peopleNum">
					<u-input :border="border" placeholder="请输入人数" v-model="model.peopleNum" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="zwpj u-m-l-30" :label-position="labelPosition"  prop="contents">
					<u-input  type="textarea" :border="border" placeholder="请输入课程简介" v-model="model.contents" />
				</u-form-item>
			</u-form>
			<u-select mode="single-column" :list="selectList" v-model="selectShowclassify" @confirm="selectConfirmclassify"></u-select>
			<u-select mode="single-column" :list="selectList" v-model="selectShowdirection" @confirm="selectConfirmdirection"></u-select>
			<u-select mode="single-column" :list="skList" v-model="selectShowtypes" @confirm="selectConfirmtypes"></u-select>
			<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
			<view class="u-flex u-row-between u-m-l-45 u-m-r-30">
				<view class="u-flex kcmx">
					<image  src="../../static/img/kcmx.png" mode=""></image>
					<text class="u-font-38" >课程明细</text>
				</view>
				<view @click="addInner" class="tj u-flex u-row-center">
					<image  src="../../static/img/jials.png" mode=""></image>
					<text class="u-m-l-10">添加</text>
				</view>
			</view>
			<view v-for="(item,index) in tabs" :key="index" class="kcxq u-m-l-30 u-m-t-40">
				<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" :border-bottom="false" label="课程" prop="kc">
						<u-input :border="border" placeholder="请输入课时名称" v-model="item.name" type="text" input-align="left"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" :border-bottom="false" label="说明" prop="sm">
						<u-input :border="border" placeholder="请输入课时说明" v-model="item.content" type="text" input-align="left"></u-input>
					</u-form-item>
					<u-form-item class="kctp" :label-position="labelPosition" :border-bottom="false" prop="photo" label-width="150">
						<u-upload ref="uUpload" @on-uploaded="onUploadedZl" :action="action" :file-list="item.urls" :show-progress="false" max-count="9" :site="baseUrl" @on-remove="onRemove">
						</u-upload>
					</u-form-item>
					<view class="u-flex u-row-center u-p-20 u-border-top" @click="delItem(index)">删除</view>
				</u-form>
			</view>
		</view>
		<u-button class="button" @click="submit">发布</u-button>
		<!-- <u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
		<view class="u-flex u-row-between u-m-l-45 u-m-r-30">
			<view class="u-flex kcmx">
				<image  src="../../static/img/kcmx.png" mode=""></image>
				<text class="u-font-38" >我的课程</text>
			</view>
				<text style="color: #4B9CFF;" >{{num}}个</text>
		</view>
		<view class="middle-sm u-m-l-20 u-m-t-20 u-m-b-80" v-for="(item,index) in curriculums" :key="index">
			<view class="u-flex u-row-between u-m-r-22">
				<view class="u-m-l-26 u-m-t-20">
					<view class="u-font-34 sm" >
						{{item.name}}
					</view>
					<view class="gxkt u-m-t-20">
						{{item.classify}}
					</view>
				</view>
				<image class="picture"  src="../../static/img/kt.png" mode=""></image>
			</view>
			<view class="u-flex u-row-between u-m-r-22">
				<view class="u-m-l-26 u-m-t-20">
					<text class="u-font-30">{{item.duration}}</text>
					<text class="jq" >￥{{item.value}}</text>
				</view>
				<text style="color: #888D99;">{{item.direction}}</text>
			</view>
		</view> -->
		
		<TriTree ref="triTree" :multiple="false" :range="fetchDict.curriculum_promotion" @confirm="function (e){return setChooseType(e,'classify')}"></TriTree>
		<TriTree ref="ptriTree" :range="fetchDict.financing_cooperation_project_category" @confirm="function (e){return setChooseType(e,'direction')}"></TriTree>
		<TriTree ref="cyTree" :multiple="false" :range="fetchDict.industry" @confirm="function (e){return setChooseType(e,'industry')}"></TriTree>
		<u-select :default-value="defaultValue" v-model="selectShowDy" mode="mutil-column-auto" value-name="value" label-name="name" child-name="submenu" :list="listCitys" @confirm="confirmCity"></u-select>
		<city-select v-model="cityActive" @city-change="cityChange"></city-select>
	</view>
</template>

<script>
	import TriTree from '@/components/tki-tree/tki-tree.vue'
import citySelect from '@/components/u-city-select.vue';
export default {
	components:{
		citySelect,
			TriTree
		},
		data(){
			return{
				cityActive: false,
				selectShowDy:false,
				filePaths: [], // 文件路径
				fileNames: '', // 文件名称
				action: this.$apis.uploadFile,
				baseUrl: this.$mConfig.baseUrl,
				height: 20,
				bgColor: this.$u.color.bgColor,
				marginTop: 30,
				marginBottom: 30,
				currentTab: 1,
				/**
				 * form验证
				 * */
				 courseId:'',
				model: {},
				tabs:[],
				index: 0,
				num: 0,
				curriculums:[
					// {
					// 	title:'关于桥梁谁家规范说明',
					// 	type: '高校课堂',
					// 	name: '20课时',
					// 	money: 5000,
					// 	zhuanye: '建筑设计专业'
					// },
					// {
					// 	title:'关于桥梁谁家规范说明',
					// 	type: '高校课堂',
					// 	name: '20课时',
					// 	money: 5000,
					// 	zhuanye: '建筑设计专业'
					// }
				],
				selectList: [],
				skList: [
					{
						value: '线上',
						label: '线上'
					}
				],
				rules: {
					classify: [{
						required: true,
						message: '请选择课程分类',
						trigger: 'change'
					}],
					direction: [{
						required: true,
						message: '请选择专业方向',
						trigger: 'change'
					}],
					types: [{
						required: true,
						message: '请选择授课方式',
						trigger: 'change'
					}]
				},
				errorType: ['toast'],
				border: false,
				selectShowclassify: false,
				selectShowdirection: false,
				selectShowtypes: false,
				labelPosition: 'left',
				fetchDict:[],
				listCitys:[],
				defaultValue:[3],
				fileList:[]
			}
		},
		mounted() {
			this.selectTeacherCurriculumAll();
		},
		// onReady() {
		// 	this.$refs.uForm.setRules(this.rules);
		// },
		onLoad(options){
			if(options.id){
				this.courseId = options.id;
				console.log("courseId",this.courseId);
				this.selectCurriculumOne(options.id);
				uni.setNavigationBarTitle({
					title:"编辑课程"
				})
			}
			this.cityList();
			this.dictionaryFetchDict('industry');
			this.dictionaryFetchDict('curriculum_promotion');
			this.dictionaryFetchDict('financing_cooperation_project_category');
		},
		methods:{	
			//删除课程明细
			delItem(index){
				var that = this;
				uni.showModal({
					title:"删除",
					content:"确实该删除课程明细？",
					success(res) {
						if(res.confirm){													that.deleteCourseDetails(that.tabs[index].id);
							that.tabs.splice(index,1);		
							
						}
					}
				})
				
			},
			async deleteCourseDetails(id){
				let data = await this.$apis.deleteCourseDetails({id:id});
				this.selectCurriculumOne(this.courseId);
			},
			//查询课程详情
			async selectCurriculumOne(id){
				let reqBody = {};
				reqBody['courseId'] = parseInt(id);
				let {data} = await this.$apis.selectCurriculumOne(reqBody);				
					data.courseDetails.forEach(function(item,index){
						if(item.url){	
							if(item.url.indexOf(',') > -1){
								var urls = item.url.split(',');
								let newArr=urls.map(val=>{
									let json={};
									json.url=val;						
									return json;							
								})						
								data.courseDetails[index].urls=newArr	
							}else{
								data.courseDetails[index].urls = [{"url":data.courseDetails[index].url}]
							}
						}else{
							data.courseDetails[index].urls = []
						}
					})
				console.log( data.courseDetails);
				this.tabs = data.courseDetails;
				data.course.methods = data.course.methods==1?'线上':'';
				this.model = data.course;
				this.currentTab = data.course.types;
			},
			cityChange(e) {
				let address = e.province.label
				if(e.city){
					address = address + '-' + e.city.label;
				}
				if(e.area){
					address = address + '-' + e.area.label;
				}
				this.model.region = address
			},
			confirmCity(e) {
				this.model.region = '';
				e.map((val, index) => {
					this.model.region += this.model.region == '' ? val.label : '-' + val.label;
				})
			},
			async cityList() {
				let result = await this.$apis.fetchArea({
					level: 2
				});
				this.listCitys = result.data;
			},
			cySelect() {
				this.$refs.cyTree._show()
			},	
			onRemove(index, lists){
				console.log('图片已被移除')
			},
			onUploadedZl(lists) {
				var filePaths = this.filePaths?this.filePaths:[],
					fileNames = [];
				for (let i in lists) {
					if (lists[i].response.code == 200) {
						filePaths.push(lists[i].response.message);
					}
				}
				this.filePaths = filePaths;
				console.log("上传图片",filePaths)
				let index = this.index>0?parseInt(this.index)-1:0;
				var item = this.tabs[index];
				console.log("item",index,item)
				if(item.url != undefined){	
					item.url = filePaths.join(',');					
				}
				
				this.tabs[index] = item;
				console.log(this.tabs);
			},
			zySelect() {
				this.$refs.ptriTree._show()
			},	
			setChooseType(item, type) {
				var column_array = this.$mUtils.array_column(item, 'label');
				var modelValue = column_array.join(',');
				this.model[type] = modelValue;
				this.$forceUpdate()
			},
			async dictionaryFetchDict(keyWords) {
				let result = await this.$apis.dictGroup({
					dictCode: keyWords
				});
				this.fetchDict[keyWords] = result.data.reverse();
				this.$forceUpdate()
			},
			mSelect() {
				this.$refs.triTree._show()
				this.$forceUpdate()
			},
			addInner(e) {
				this.index += 1;
				this.tabs.push({
					tabId: this.index,
					name: '',
					content: '',
					url: '',
				});
				console.log(this.tabs);
			},
			async submit() {
				this.saveCourse();
				// this.$refs.uForm.validate(valid => {
				// 	if (valid) {
				// 		console.log('验证通过');
				// 		this.saveCourse();
				// 	} else {
				// 		console.log('验证失败');
				// 	}
				// });
			},
			//发布课程
			async saveCourse(){
				try {
				let reqBody = {};
				let course = {};
				let courseDetails = [];
				if(this.courseId) course['id'] = this.courseId;
				console.log("save courseId",this.courseId);
				course['region'] = this.model.region;
				course['industry'] = this.model.industry;
				course['classify'] = this.model.classify;
				course['direction'] = this.model.direction;
				course['duration'] = this.model.duration;
				course['methods'] = this.methods;
				course['name'] = this.model.name;
				course['value'] = parseInt(this.model.value);
				course['contents'] = this.model.contents;
				course['peopleNum'] = parseInt(this.model.peopleNum);
				course['types'] = this.currentTab;
				courseDetails = this.tabs
				reqBody['course'] = course;
				reqBody['courseDetails'] = courseDetails;
				let data = await this.$apis.saveCourse(reqBody);
				if(data.code == 200){
					var titleToast = "发布课程成功";
					if(this.courseId){
						titleToast = "编辑课程成功";
					}
					uni.showToast({
							title: titleToast,
							icon: 'none'
					});
					this.selectTeacherCurriculumAll();
					setTimeout(() => {
						uni.navigateBack()
					},2000)
					
				}else{
					uni.showToast({
						title: data.msg,
						icon: 'none'
					});
					return;
				}
				} catch (e) {
					console.log(e);
					this.submitBtnDis = false;
				}
			},
			//教师查询自己的发布的课程
			async selectTeacherCurriculumAll(){
				let data = await this.$apis.selectTeacherCurriculumAll();
				this.curriculums = data.data;
				this.num = this.curriculums.length;
			},
			changeTab(e){
				this.currentTab = e
			},
			// 选择
			selectConfirmclassify(e) {
				this.model.classify = '';
				e.map((val, index) => {
					this.model.classify += this.model.classify == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmdirection(e) {
				this.model.direction = '';
				e.map((val, index) => {
					this.model.direction += this.model.direction == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmtypes(e) {
				if(e[0].value=="线上"){
					this.methods = 1
				}
				this.model.types = '';
				e.map((val, index) => {
					this.model.types += this.model.types == '' ? val.label : '-' + val.label;
				});
			},
		},
		
	}
</script>

<style scoped lang="scss">
	.f-item{
		text{
			padding-bottom: 20rpx;
		}
		.qb{
			padding-bottom: 20rpx;
			color: #AB61FF;
			border-bottom: 5rpx solid #AB61FF;
		}
	}
	.zwpj{
		width: 690rpx;
		height: 276rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
		
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}
	.kcmx{
		image{
			width: 34rpx; height: 38rpx;
		}
		text{
			font-weight: bold;
			margin-left: 11rpx;
		}
	}
	.tj{
		width: 136rpx;
		height: 52rpx;
		border: 1rpx solid #4B9CFF;
		border-radius: 26rpx;
		color: #4B9CFF;
		font-size: 30rpx;
		image{
			width: 25rpx; height: 25rpx;
		}
	}
	.kcxq{
		width: 690rpx;
		// height: 420rpx;
		background: #F5F5F9;
		border-radius: 20rpx;
	}
	.kctp{
		margin-top: -30rpx;
	}
	.button {
		width: 662rpx;
		margin:117rpx auto 44rpx auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;
		&.u-hairline-border:after {
			border: 0;
		}
	}
	.middle-sm{
		width: 710rpx;
		height: 222rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(121, 136, 156, 0.2);
		border-radius: 20rpx;
	}
	.gxkt{
		height: 42rpx;
		background: #EDF5FF;
		border-radius: 6rpx;
		color: #4B9CFF;
		font-size: 26rpx;
		text-align: center;
		line-height: 42rpx;
	}
	.sm{
		font-weight: bold;
	}
	.picture{
		width: 121rpx; 
		height: 110rpx; 
		margin-top: 25rpx;
	}
	.jq{
		font-size: 38rpx; 
		color: #FE5022; 
		font-weight: bold; 
		margin-left: 20rpx;
	}
</style>
